<form [formGroup]="form" class="form">
  <label for="character-selection" class="control-label">
    <div class="label">
      <span class="label-text">选择你最喜爱的角色</span>
    </div>
    <app-character-selector
      id="character-selection"
      formControlName="character"
    />
  </label>
  @if (form.controls.character.value) {
    <label @expand class="control-label">
      <div class="label">
        <span class="label-text"
          >为什么选了<b>{{
            form.controls.character.value
          }}</b
          >?</span
        >
      </div>
      <textarea
        formControlName="reason"
        class="textarea textarea-bordered h-24"
        placeholder="Bio"
      ></textarea>
    </label>
  }
</form>

<label
  class="label cursor-pointer w-96 mt-2 self-center justify-end space-x-4"
>
  <span class="label-text">Disabled</span>
  <input
    (change)="updateFormDisabledState($event.target)"
    type="checkbox"
    class="checkbox checkbox-primary"
  />
</label>

<div class="divider">FORM VALUE</div>

<div class="result">
  <pre><code><code class="font-bold">Value:</code>
{{ form.value | json }}

<code class="font-bold">Touched:</code> {{ form.touched }}

<code class="font-bold">Status:</code> {{ form.status }}
</code></pre>
</div>
